<template>
  <div class="main-sidebar-height" style="padding-bottom: 24px; background-color: #fff">
    <PageHeader @back="goback" subTitle="返回"> 批量离职员工 </PageHeader>
    <!-- dataDetail2 === null || dataDetail2.length === 0 -->
    <div v-if="dataDetail2 === null || dataDetail2.length === 0">
      <a-spin :spinning="uploading">
        <div class="ant-upload-select-text-box" style="padding-top: 24px">
          <a-upload
            name="file"
            :multiple="false"
            accept=".xls, .xlsx, .xlsm"
            :show-upload-list="false"
            :action="action"
            :custom-request="beforeUpload1"
          >
            <img :src="uploadImg" style="width: 139px; height: 106px" />
            <div class="ant-modal-body">
              <div style="font-size: 12px; color: #666">点击添加文件或将文件拖拽到此处</div>
              <div style="font-size: 12px; color: #999">(文件大小不超过5M)</div>
            </div>
          </a-upload>
        </div>
      </a-spin>
      <div class="tipBox">
        <a-row style="color: #252525; font-size: 16px; font-weight: 500"> 温馨提示： </a-row>
        <a-row>
          <a-col :span="12" style="line-height: 25px; color: #999">
            <div style="margin-top: 6px">
              首先下载标准模板，填写信息后上传<a-button
                size="small"
                type="link"
                @click="download"
                class="primary_color"
                style="font-size: 12px"
                >下载标准模板</a-button
              >
            </div>
            <div>1.请将要上传的内容放在模板的离职员工中,单次导入员工上限为2000条</div>
            <div>2.身份证号、离职原因、离职日期为必填项，顺序可调整，但不可删除</div>
            <div>3.身份证号用来判断员工的唯一性</div>
            <!-- <div>4.当在模板中进行了社保医保公积金的减员，还需去社保服务模板中进行减员标记，方可减员成功</div> -->
            <div>4.若Excel文件设有权限密码，需取消Excel文件密码，否则系统无法识别</div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div v-else style="display: flex; padding-top: 15px; padding-left: 24px; padding-right: 24px; flex-direction: column; width: 100%">
      <div>
        <div
          style="
            padding-left: 10px;
            display: flex;
            flex-flow: row;
            align-items: center;
            height: 35px;
            width: 100%;
            background-color: #fffbe6;
            border-style: solid;
            border-color: #ffe58f;
            border-width: 1px;
            border-radius: 5px;
          "
        >
          <img style="width: 16px; height: 16px; margin-right: 5px" src="../../../assets/icons/重复.png" />
          <span sytle="color:#55565D;font-size:14px;">
            共{{ allCount }}条数据，成功导入{{ successCount }}条数据， <label class="redc">{{ errorCount }}</label
            >条数据导入失败
          </span>
        </div>
      </div>
      <div class="header-title-box">
        <div class="headerTitle">
          <div class="block" />
          <div style="font-size: 15px; font-weight: 700; font-color: #252525">错误信息</div>
        </div>
        <div class="btn-box">
          <a-button class="fr" type="primary" @click="BatchGet" :disabled="uploading">{{
            uploading ? "数据导出中..." : "导出错误数据"
          }}</a-button>
        </div>
      </div>
      <a-table :columns="columnDialogDetailguding" :data-source="dataDetail2" :scroll="{ x: 800 }" row-key="id">
        <template slot="errorInfo" slot-scope="text">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ text }}</span>
            </template>
            {{ text }}
          </a-tooltip>
        </template>
        <template slot="empName" slot-scope="text, record">
          <div :style="{ color: getRed('empName', record) ? '#ff0000' : '#000000' }">
            {{ text }}
          </div>
        </template>
        <template slot="idCard" slot-scope="text, record">
          <div :style="{ color: getRed('idCard', record) ? '#ff0000' : '#000000' }">
            {{ text }}
          </div>
        </template>
        <template slot="leaveOfficeReason" slot-scope="text, record">
          <div :style="{ color: getRed('leaveOfficeReason', record) ? '#ff0000' : '#000000' }">
            {{ text }}
          </div>
        </template>
        <template slot="leaveOfficeDate" slot-scope="text, record">
          <div :style="{ color: getRed('leaveOfficeDate', record) ? '#ff0000' : '#000000' }">
            {{ text }}
          </div>
        </template>
        <template slot="remark" slot-scope="text, record">
          <div :style="{ color: getRed('remark', record) ? '#ff0000' : '#000000' }">
            {{ text }}
          </div>
        </template>
        <template slot="stopSocDate" slot-scope="text, record">
          <div :style="{ color: getRed('stopSocDate', record) ? '#ff0000' : '#000000' }">
            {{ text === null ? "-" : text }}
          </div>
        </template>
        <template slot="stopMeDate" slot-scope="text, record">
          <div :style="{ color: getRed('stopMeDate', record) ? '#ff0000' : '#000000' }">
            {{ text === null ? "-" : text }}
          </div>
        </template>
        <template slot="sealedDate" slot-scope="text, record">
          <div :style="{ color: getRed('sealedDate', record) ? '#ff0000' : '#000000' }">
            {{ text === null ? "-" : text }}
          </div>
        </template>
        <template slot="whetherSocDecrease" slot-scope="text, record">
          <div :style="{ color: getRed('whetherSocDecrease', record) ? '#ff0000' : '#000000' }">
            {{ record.whetherSocDecrease ? "是" : "否" }}
          </div>
        </template>
        <template slot="whetherMeDecrease" slot-scope="text, record">
          <div :style="{ color: getRed('whetherMeDecrease', record) ? '#ff0000' : '#000000' }">
            {{ record.whetherMeDecrease ? "是" : "否" }}
          </div>
        </template>
        <template slot="whetherSealed" slot-scope="text, record">
          <div :style="{ color: getRed('whetherSealed', record) ? '#ff0000' : '#000000' }">
            {{ record.whetherSealed ? "是" : "否" }}
          </div>
        </template>
      </a-table>
    </div>
    <a-modal title="离职Excel导入" :visible="isDaoru" width="600px" @cancel="handleCancel">
      <template slot="footer">
        <a-button @click="handleCancel">取消导入</a-button>
        <a-button type="primary" @click="ExportHandle">继续导入</a-button>
      </template>

      <div class="modal-box2" style="display: flex; justify-content: space-between"></div>
      <div
        style="
          background-color: #faf9f9;
          border-radius: 5px;
          padding-left: 15px;
          padding-top: 15px;
          padding-right: 15px;
          padding-bottom: 15px;
        "
      >
        <div sytle="font-size:16px;color:#3C3D43;font-weight:bold;">温馨提示</div>
        <div style="font-size: 12px; color: #a6a8b4; margin-top: 8px">
          表格中的员工导入后直接离职，已离职的员工无法发起合同。 请先签署合同，再办理离职员工
        </div>
      </div>
    </a-modal>
    <a-modal v-model="dialogFailVisible" title="批量离职" width="500px" @ok="handleCancel">
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleLizhi">确定</a-button>
      </template>
      <div style="padding-left: 10px; display: flex; flex-flow: row; align-items: center; height: 35px; width: 100%">
        <img style="width: 25px; height: 25px; margin-right: 10px" src="../../../assets/icons/duihao.png" />
        <div style="color: #3c3d43; font-size: 15px; font-weight: 700">共{{ allCount }}条数据，全部导入成功！</div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import UploadMixin from "xqjr-plugin-common/UploadOrExport/uploadMixin";
const mixin = new UploadMixin();
const columnDialogDetailguding = [
  {
    title: "错误信息",
    dataIndex: "errorInfo",
    key: "errorInfo",
    scopedSlots: { customRender: "errorInfo" },
    align: "center",
    width: 160,
    ellipsis: true,
    fixed: "left"
  },
  {
    title: "姓名",
    dataIndex: "empName",
    scopedSlots: { customRender: "empName" },
    align: "center",
    ellipsis: true,
    key: "empName",
    width: 140
  },
  {
    title: "身份证号",
    dataIndex: "idCard",
    scopedSlots: { customRender: "idCard" },
    align: "center",
    ellipsis: true,
    key: "idCard",
    width: 200
  },
  {
    title: "离职原因",
    dataIndex: "leaveOfficeReason",
    scopedSlots: { customRender: "leaveOfficeReason" },
    align: "center",
    ellipsis: true,
    key: "leaveOfficeReason",
    width: 170
  },
  {
    title: "离职日期",
    dataIndex: "leaveOfficeDate",
    scopedSlots: { customRender: "leaveOfficeDate" },
    align: "center",
    ellipsis: true,
    key: "leaveOfficeDate",
    width: 140
  },
  {
    title: "离职备注",
    dataIndex: "remark",
    scopedSlots: { customRender: "remark" },
    align: "center",
    ellipsis: true,
    key: "remark",
    width: 170
  },
  {
    title: "是否社保减员",
    dataIndex: "whetherSocDecrease",
    scopedSlots: { customRender: "whetherSocDecrease" },
    align: "center",
    ellipsis: true,
    key: "whetherSocDecrease",
    width: 130
  },
  {
    title: "社保减员年月",
    dataIndex: "stopSocDate",
    scopedSlots: { customRender: "stopSocDate" },
    align: "center",
    ellipsis: true,
    key: "stopSocDate",
    width: 140
  },
  {
    title: "是否医保减员",
    dataIndex: "whetherMeDecrease",
    scopedSlots: { customRender: "whetherMeDecrease" },
    align: "center",
    ellipsis: true,
    key: "whetherMeDecrease",
    width: 130
  },
  {
    title: "医保减员年月",
    dataIndex: "stopMeDate",
    scopedSlots: { customRender: "stopMeDate" },
    align: "center",
    ellipsis: true,
    key: "stopMeDate",
    width: 140
  },
  {
    title: "是否公积金减员",
    dataIndex: "whetherSealed",
    scopedSlots: { customRender: "whetherSealed" },
    align: "center",
    ellipsis: true,
    key: "whetherSealed",
    width: 130
  },
  {
    title: "公积金减员年月",
    dataIndex: "sealedDate",
    ellipsis: true,
    scopedSlots: { customRender: "sealedDate" },
    align: "center",
    key: "sealedDate",
    width: 140
  },
  {
    title: "服务费",
    dataIndex: "serviceCost",
    ellipsis: true,
    scopedSlots: { customRender: "serviceCost" },
    align: "center",
    key: "serviceCost",
    width: 140
  }
];
import axios from "axios";
import qs from "qs";
export default {
  mixins: [mixin],
  data() {
    return {
      isDaoru: false,
      uploading: false,
      allCount: 0,
      errorCount: 0,
      successCount: 0,
      columnDialogDetailguding,
      uploadImg: require("@/assets/img/uploadImg.png"),
      action: "",
      socFile: undefined,
      dialogFailVisible: false,
      dataDetail2: []
    };
  },

  created() {
    this.$route.query.companyId;
    this.dataDetail2 = [];
  },
  methods: {
    handleLizhi() {
      this.isDaoru = false;
      this.dialogFailVisible = false;
      this.$router.push({
        path: "/staff/LeaveList"
      });
    },
    handleCancel() {
      this.isDaoru = false;
      this.dialogFailVisible = false;
    },
    ExportHandle() {
      this.isDaoru = false;
      this.handleImportChange();
    },
    getRed(key, record) {
      if (record !== undefined && record.errorColumn !== null) {
        for (var i = 0; i < record.errorColumn.length; i++) {
          if (record.errorColumn[i] === key) {
            return true;
          }
        }
      }
      return false;
    },
    BatchGet() {
      this.uploading = true;
      const url = "/hr/api/v1/empChanges/exportErrorList";
      const data = { errorList: this.dataDetail2 };
      axios({
        url,
        data,
        method: "post",
        responseType: "blob",
        headers: {
          token: this.$store.state.auth.token,
          "Content-Type": "application/json"
        }
      })
        .then((res) => {
          this.uploading = false;
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${this.$store.state.hr.companyName}_` + "批量离职错误数据" + ".xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    handleImportChange() {
      this.uploading = true;
      const url = "/hr/api/v1/empChanges/importExcel";
      const tdata = new FormData();
      tdata.append("companyId", this.$store.state.hr.companyId);
      tdata.append("file", this.socFile);

      this.$request({
        url,
        method: "post",
        data: tdata
      })
        .then((res) => {
          this.uploading = false;
          if (res.data) {
            this.allCount = res.data.allCount;
            this.errorCount = res.data.errorCount;
            this.successCount = res.data.successCount;
            this.dataDetail2 = res.data.errorList;
            if (this.dataDetail2 == null || this.dataDetail2.length === 0) {
              this.dialogFailVisible = true;
            }
          }
        })
        .catch((err) => {
          this.uploading = false;
          console.log("debug log --> ", err);
        });
    },
    beforeUpload1({ file }) {
      this.socFile = file;
      if (this.socFile) {
        this.isDaoru = true;
      }
    },

    // 下载模板
    download() {
      const token = this.$store.state.auth.token;
      let params = {};
      params = {
        templateName: "batchLeaveOfficeImportTemplate.xlsx"
      };

      axios({
        url: ` /hr/api/v1/excel/template/download`,
        params,
        paramsSerializer: (param) => {
          return qs.stringify(param, { indices: false });
        },
        method: "get",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "multipart/form-data"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "批量确认离职模板.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },

    handleUploadError() {
      this.$message.warning("没有文件");
    }
  }
};
</script>
<style lang="scss" scoped>
.main-sidebar-height {
  min-height: calc(100vh);
}
.header-title-box {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerTitle {
    display: flex;
    justify-content: flex-start;
    .block {
      width: 3px;
      height: 20px;
      margin-top: 2px;
      background-color: var(--primary);
      margin-right: 12px;
    }
  }
}
.tipBox {
  line-height: 18px;
  background: #faf9f9;
  border-radius: 4px;
  font-size: 12px;
  color: #595959;
  margin: 0 24px;
  padding: 12px;
  height: 200px;
}
.ant-upload-select-text-box {
  border: 1px dashed #b8b8b8;
  background: #fff;
  margin: 24px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 12px;
}
.ant-upload-select-text-box ::v-deep .ant-upload-list {
  display: none;
}

.ant-modal-body {
  line-height: 24px;

  em {
    color: var(--primary);
    font-style: normal;
  }
}
.redc {
  color: red;
}
</style>
